<script setup>
import {userGetInfoAPI, updateUserInfoAPI,updateAvatarAPI} from "@/api/user.js";
import {useUserStore} from "@/stores/user.js"
import {useTokenStore} from "@/stores/token.js"
import { onMounted, toRef, ref, watch, onUpdated } from "vue";
import { ManOutlined, WomanOutlined } from "@vicons/antd";
import {CreateOutline} from "@vicons/ionicons5";
import {resetUserInfo} from "@/utils/compute.js"
import {createDiscreteApi} from 'naive-ui'
import {regionData,codeToText} from "element-china-area-data";
import {serverBaseURL} from "@/utils/request.js"

const {message} = createDiscreteApi(
    ["message", 'dialog', 'notification', 'loadingBar', 'modal']
)
const userStore = useUserStore()
const tokenStore = useTokenStore()

let userData = toRef(userStore,'user')

onMounted(async()=>{
  console.log(userData);
})

// 监听器watch
// watch(userData,(newVal,oldVal)=>{
//   console.log(userData.value.nowRank);
// },{deep: true})

// 修改个人信息
const userNewInfo = ref({
  avatar:'',
  name: userData.value.username,
  // phone:'',
  sex: userData.value.sex,
  area: userData.value.area,
  intro: userData.value.intro
})

  //地区 
const regionDatas = ref(regionData)
const props = {
  expandTrigger:'hover',
  label: "label",
  value: "label",
  children: "children"
}

// 地区选择回调—
const handleChange = (res)=>{
  console.log(res);
}

let dialogVisible = ref(false)

// 打开修改框
const changInfoBtn = async ()=>{
  dialogVisible.value = true
}
// before关闭dialog
const handleClose = ()=>{
  dialogVisible.value = false
  resetChange()
}
// 重置修改
const resetChange = ()=>{
  userNewInfo.value.avatar = ''
  userNewInfo.value.name = userData.value.username
  // userNewInfo.value.phone=''
  userNewInfo.value.sex = userData.value.sex
  userNewInfo.value.intro = userData.value.intro
  userNewInfo.value.area = userData.value.area
}
// 取消修改
const changeCancel = ()=>{ 
  dialogVisible.value = false 
  resetChange()
}
// 确定修改
const changeConfirm = async()=>{
  // console.log(userNewInfo);
  let areaStr = userNewInfo.value.area.join(",")
  let p = {
    id:userData.id,
    username: userNewInfo.value.name,
    // phone: userNewInfo.value.phone,
    sex: userNewInfo.value.sex,
    area: areaStr,
    intro: userNewInfo.value.intro
  }
  // console.log(p);
  let res = await updateUserInfoAPI(p)
  res = resetUserInfo(res)
  useUserStore().setUser(res.data)
  dialogVisible.value = false
  message.success("修改成功")
}

// 上传头像
const updateUrl = updateAvatarAPI(userData.id)
const urlHeader = ref({
  "jwt-token": tokenStore.token
})
const handleAvatarSuccess = async(res,file)=>{
  let result = await userGetInfoAPI()
  result = resetUserInfo(result)
  useUserStore().setUser(result.data)
  message.success("修改成功")
}
const beforeAvatarUpload = (file)=>{
  // console.log(file);
}

</script>

<template>
  <div class="messageCon">
    <div class="userInfo">
      <div class="avatarBox">
        <n-avatar
          :size="100"
          :src="serverBaseURL+userData.avatar"
        />
        <el-upload
          :show-file-list="false"
          class="avatar-uploader"
          :action="updateUrl"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :headers="urlHeader"
        >
          <img v-if="userNewInfo.avatar" :src="serverBaseURL+userNewInfo.avatar" class="avatar" />
          <div class="uploadAvaIcon">
            <i class="iconfont icon-tianjia"></i>
          </div>
        </el-upload>
      </div>
      <div class="detail">
        <div>
          <n-icon :size="24">
            <ManOutlined  color="#409EFF" v-if="userData.sex=='1'"/>
            <WomanOutlined  color="#F56C6C" v-else/>
          </n-icon>
          <p>{{userData.username}}</p>
          <n-icon :size="30" class="change" title="修改" @click="changInfoBtn">
            <CreateOutline/>
          </n-icon>
        </div>
        <div>
          <span>ID：{{userData.id}}</span>
          <div class="area">
            <i class="iconfont icon-dizhi"></i>
            <p>{{userData.area[0]}}</p>
          </div>
          <div class="area phone">
            <i class="iconfont icon-phone"></i>
            <p>{{userData.phone.slice(0,3)}}****{{userData.phone.slice(-4)}}</p>
          </div>
        </div>
        <p>个签：{{userData.intro}}</p>
      </div>
    </div>
    <div class="showRank">
      <div>
        <p>当前</p>
        <i class="iconfont icon-xunzhang"></i>
        <span>{{userData.nowRank}}</span>
      </div>
      <div>
        <p>最高</p>
        <i class="iconfont icon-xunzhang"></i>
        <span>{{userData.bestRank}}</span>
      </div>
      <div>
        <p>对战场次</p>
        <i class="iconfont icon-a-vsshense"></i>
        <span>{{userData.totalCount}}</span>
      </div>
      <div>
        <p>胜利场次</p>
        <i class="iconfont icon-jiangbei-"></i>
        <span>{{userData.winCount}}</span>
      </div>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      class="changeDialog"
      v-model="dialogVisible"
      title="修改个人信息"
      center
      width="50%"
      :before-close="handleClose"
    >
      <div class="changeBar">
        <p>昵称：</p>
        <el-input v-model="userNewInfo.name" style="width: 240px" placeholder="请输入新昵称"/>
      </div>
      <div class="changeBar sex">
        <p>性别：</p>
        <el-radio-group v-model="userNewInfo.sex" class="ml-4" fill="#18a058" text-color="#18a058">
          <el-radio value="1" size="large">男</el-radio>
          <el-radio value="0" size="large">女</el-radio>
        </el-radio-group>
      </div>
<!--      <div class="changeBar">-->
<!--        <p>手机号码：</p>-->
<!--        <el-input v-model="userNewInfo.phone" style="width: 240px" placeholder="请输入新手机号码"/>-->
<!--      </div>-->
      <div class="changeBar">
        <p>地区：</p>
        <el-cascader
          v-model="userNewInfo.area"
          :options="regionDatas"
          :props="props"
          @change="handleChange"
          clearable
          placeholder="请选择所在地区"
        />
      </div>
      <div class="changeBar">
        <p>个性签名：</p>
        <el-input v-model="userNewInfo.intro" type="textarea" :rows="2" resize="none" style="width: 240px" placeholder="请输入个性签名" />
      </div>
    
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="changeCancel">取消</el-button>
          <el-button type="primary" @click="changeConfirm">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
.messageCon{
  color: #333;
  .changeDialog{

    .changeBar{
      display: flex;
      align-items: center;
      margin: 10px 0;
      >p{
        width: 100px;
        text-align: right;
        margin-right: 25px;
      }
      &:nth-child(4) >p{
        align-self: flex-start;
      }
    }
    .changeBar.sex{
      .el-radio{
        margin-right: 20px;
      }
    }
    .dialog-footer{
      display: flex;
      justify-content: space-around;
      .el-button{
        width: 150px;
      }
    }
  }
  .showRank{
    margin-top: 50px;
    display: flex;
    >div{
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      span{
        font-size: 16px;
      }
      .iconfont{
        font-size: 50px;
      }
      .icon-a-vsshense{
        font-size: 40px;  
      }
    }
  }
  .userInfo{
    height: 120px;
    display: flex;
    align-items: center;
    .detail{
      margin-left: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      >div{
        display: flex;
        align-items: center;
        .area{
          display: flex;
          align-items: center;
          i{
            font-size: 18px;
            display: inline-block;
            margin-left: 40px;
          }
          p{
            font-size: 16px;
            line-height: 40px;
          }
          &.phone{
            i::before{
              background: @mainColor;
              -webkit-background-clip: text;			// 绘制区域为文字
              -webkit-text-fill-color: transparent;
            }
          }
        }
        .change{
          text-align: center;
          margin-left: 20px;
          margin-bottom: 5px;
          cursor: pointer;
        }
        p{
          font-size: 30px;
          margin-left: 5px;
        }
      }
      >p{
        font-size: 16px;
      }
      >span{
        font-size: 18px;
      }
    }
    .avatarBox{
      display: flex;
      position: relative;
      .avatar-uploader{
        z-index: 9;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        .el-upload{
          .uploadAvaIcon{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border:1px solid #eee;
            border-radius: 2px;
            text-align:center;
            color: #33333300;
            .iconfont{
              font-size: 28px;
            }
            &:hover{
              color: #333;
              background: #fffffff0;
              border: 1px dashed @mainColor;
            }
          }
        }
      }
      .n-avatar{
        border: 1px solid rgb(239, 239, 245);
        border-radius: 2px;
      }
    }
  }
}
</style>